<!DOCTYPE html>
<html>
    <head>
        <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport" />
        <meta charset="utf-8">
        <meta name="renderer" content=webkit>
        <!-- 引入vue -->
        <script src="../js/vue.js"></script>
        <!-- 引入组件库 -->
        <script src="../js/jQyery.js"></script>
        <script src="../js/layer/layer.js"></script>

        <script src="../js/element/element.js"></script>
        <script src="../js/new.js"></script>
        <!-- 引入样式 -->
        <link rel="stylesheet" href="../js/element/element.css">
        <link rel="stylesheet" href="../css/main.css">
        <link rel="stylesheet" href="../css/maincontent.css">
        <link rel="stylesheet" href="../css/newmain.css">

    </head>
    <style>
        [v-cloak]{
            display: none;
        }
    </style>
    <body>
        <div class="index_main"  onclick="hidediaolog()">
            <div class="index_mainhead" id="app" v-cloak >
                <div class="imh_left">
                    <img class="index_logo" src="../img/logowhite.png">
                    <el-tooltip class="item" effect="light" content="折叠" placement="right" v-if="!isCollapse" >
                        <img class="index_action" src="../img/logonext.png" v-on:click="changemenu">
                    </el-tooltip>

                    <el-tooltip class="item" effect="light" content="展开" placement="right" v-if="isCollapse">
                        <img class="index_action"  src="../img/right.png" v-on:click="changemenu">
                    </el-tooltip>

                </div>
                <div class="imh_right">
                    <div class="right_notice" v-on:click.stop="shownoticedialog">
                        <el-badge :value="12" :max="99" class="item">
                            <img class="right_noticeimg" src="../img/jinbao.png">
                        </el-badge>
                        <div class="noticelist" v-if="shownotice">
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/yiji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/erji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticediv">
                                <img src="../img/sanji.png">
                                <span>一级警告提示文字辅助性触 字辅助性字辅助性字</span>
                            </div>
                            <div class="noticebottom">
                                <span>点击查看更多</span>
                            </div>
                        </div>
                    </div>
                    <div class="title_rightdiv" v-on:click.stop="showlangdialog">
                        <img :src="langinfo.img">
                        <span style="margin-left: 0.1rem;color: #fff">{{langinfo.name}}</span>
                        <img src="../img/xlwhite.png" style="margin-left: 0.05rem;">
                    </div>
                    <div class="head_line">

                    </div>
                    <div class="head_loginout">
                        <img src="../img/tuichu.png">
                    </div>
                </div>

                <div class="changelang" v-if="showlang" style="right: 0.14rem;top: 0.86rem">
                    <template v-for="item in langlist">
                        <div class="landiv" :class="{choselandiv:item.img===langinfo.img}" v-on:click="chosethis(item)">
                            <img :src="item.img">
                            <span>{{item.name}}</span>
                        </div>
                    </template>

                </div>
            </div>
            <div class="index_maincontent">
                <div class="imc_left" id="meun" v-cloak>
                    <div class="imc_userinfo" v-on:click.stop="showuserinfoactiondialog" v-if="!isCollapse">
                        <div class="userimg">
                            <img src="../img/tx.png">
                        </div>
                        <div class="userinfo" >
                            <div class="usertitle">
                                <span>智棚物联网</span>
                            </div>
                            <div class="userdesc">
                                <span>管理员</span>
                            </div>
                        </div>

                        <div class="userinfoaction" v-if="showuserinfoaction">
                            <div class="actionimg">
                                <img src="../img/sanjiao.png">
                            </div>
                            <div class="actionlist">
                                <div class="actiondiv">
                                    <span>基本资料</span>
                                </div>
                                <div class="actiondiv">
                                    <span>修改密码</span>
                                </div>
                                <div class="actiondiv">
                                    <span>退出</span>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="indexmenu">
                        <el-menu
                            ref="menu"
                            default-active="1"
                            class="el-menu-vertical-demo"
                            @open="handleOpen"
                            @close="handleClose"
                            :collapse="isCollapse"
                            background-color="#1A2F70"
                            text-color="#dfdfdf"
                            :unique-opened="true"
                            :collapse-transition="false">
                            <el-menu-item index="2" v-on:click="hidefarmlist">
                                <i class="el-icon-s-home"></i>
                                <span slot="title">首页</span>
                            </el-menu-item>
                            <el-submenu index="1">
                                <template slot="title">
                                    <i class="el-icon-s-grid"></i>
                                    <span>农场列表</span>
                                </template>
                                <el-menu-item-group class="seconditem" style="background: #253C82">
                                    <el-menu-item index="1-1">选项1</el-menu-item>
                                    <el-menu-item index="1-2">选项2</el-menu-item>
                                    <el-menu-item index="1-3">选项3</el-menu-item>
                                    <el-submenu index="1-4">
                                        <template slot="title">选项4</template>
                                        <el-menu-item class="thirditem" index="1-4-1">选项1</el-menu-item>
                                    </el-submenu>
                                </el-menu-item-group>




                            </el-submenu>

                            <el-menu-item index="3" v-on:click="hidefarmlist">
                              <i class="el-icon-s-platform"></i>
                              <span slot="title">智能场景</span>
                            </el-menu-item>
                            <el-menu-item index="4" v-on:click="hidefarmlist">
                              <i class="el-icon-s-order"></i>
                              <span slot="title">智棚服务</span>
                            </el-menu-item>
                        </el-menu>
                    </div>

                </div>
                <div class="imc_right" id="content" v-cloak>
                    <div class="imc_righthead">
                        <span>首页</span>
                    </div>
                    <div class="mainright_content">
                        <div class="fc_maindiv">
                            <div class="fc_maindivcontent">

                                <template>
                                    <div class="clearfix control_allBox">
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_3.png">环境控制策略</div>
                                            <div class="timeInterval-text">{{ timeInterval }}</div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_4.png">温度</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <span class="bar_left_text barDetail_left_text">{{ temperature.leftValue }}</span>
                                                    <span class="bar_right_text barDetail_right_text">{{ temperature.rightValue }}</span>
                                                    <div class="bar_center_text barDetail_center_text">
                                                        <div>{{ temperature.value }}℃</div>
                                                        <div>温度</div>
                                                    </div>
                                                    <div class="control_bar controlDetail_bar" style="border-left-color:#496ECC;border-top-color:#9D9DA8;border-right-color:#FB4C2F;"></div>
                                                    <div class="center">
                                                        <div :id="'dot' + 'temperature'" ref="dot" class="dot detailDot"
                                                             :class="[temperature.blueShow ? 'dot-blue' : '', temperature.grayShow ? 'dot-gray' : '', temperature.redShow ? 'dot-Red' : '']"></div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">降温状态<br><span>{{ temperature.type }}</span></div>
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">降温温度计算<br><span>{{ temperature.calculation }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_5.png">湿度</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <span class="bar_left_text barDetail_left_text">{{ humidity.leftValue }}</span>
                                                    <span class="bar_right_text barDetail_right_text">{{ humidity.rightValue }}</span>
                                                    <div class="bar_center_text barDetail_center_text">
                                                        <div>{{ humidity.value }}℃</div>
                                                        <div>温度</div>
                                                    </div>
                                                    <div class="control_bar controlDetail_bar" style="border-left-color:#496ECC;border-top-color:#20A23F;border-right-color:#1B316E;"></div>
                                                    <div class="center">
                                                        <div :id="'dot' + 'humidity'" ref="dot" class="dot detailDot"
                                                             :class="[humidity.blueShow ? 'dot-blue' : '', humidity.grayShow ? 'dot-green' : '', humidity.redShow ? 'dot-hardBlue' : '']"></div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">绝对湿度测量值<br><span>{{ humidity.measuredValue }}克/立方米</span></div>
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">测量湿度缺失值<br><span>{{ humidity.missingValue }}克/立方米</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_6.png">开窗</div>
                                            <div class="controlDetail_list_allBox">
                                                <div v-for="(item,index) in windowList" :key="`window-${index}`" class="controlDetail_list_box">
                                                    <span>{{ item.name }}</span>
                                                    <el-progress class="controlDetail_list_progressBar" :text-inside="true" :stroke-width="16" :percentage="item.value"></el-progress>
                                                    <span>{{ item.type }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_7.png">降温设备</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <el-progress  class="controlDetail_bar controlDetail_facility" :color="`#EFF2FF`"
                                                                  :class="[cooling.value !== '未运行' ? 'controlDetail_cooling' : 'controlDetail_facility_right']"
                                                                  type="circle" :percentage="`30`" color="blue" width="120" :show-text="false"></el-progress>
                                                    <!--<div class="control_bar controlDetail_bar controlDetail_facility"  :class="[cooling.value !== '未运行' ? '' : 'controlDetail_facility_right']"
                                                         style="border-top-color:#EFF2FF;border-bottom-color:#EFF2FF;border-left-color:#EFF2FF;border-right-color:#496ECC;"></div>-->
                                                    <div class="bar_center_text barDetail_center_text facility_center_text">
                                                        <div>{{ cooling.value }}</div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">制冷状态<br><span>{{ cooling.type }}</span></div>
                                                 </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_8.png">帘幕</div>
                                            <div class="controlDetail_list_allBox">
                                                <div v-for="(item,index) in curtainList" :key="`curtain-${index}`" class="controlDetail_list_box">
                                                    <span>{{ item.name }}</span>
                                                    <el-progress class="controlDetail_list_progressBar" :text-inside="true" :stroke-width="16" :percentage="item.value"></el-progress>
                                                    <span>{{ item.type }}</span>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_9.png">加热设备</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <el-progress  class="controlDetail_bar controlDetail_facility" :color="`#EFF2FF`"
                                                                  :class="[heating.value !== '未运行' ? 'controlDetail_heating' : 'controlDetail_facility_right']"
                                                                  type="circle" :percentage="`30`" color="blue" width="120" :show-text="false"></el-progress>
                                                    <!--<div class="control_bar controlDetail_bar controlDetail_facility"  :class="[heating.value !== '未运行' ? '' : 'controlDetail_facility_right']"
                                                         style="border-top-color:#EFF2FF;border-bottom-color:#EFF2FF;border-left-color:#EFF2FF;border-right-color:#FB4C2F;"></div>-->
                                                    <div class="bar_center_text barDetail_center_text facility_center_text">
                                                        <div>{{ heating.value }}</div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">加热状态<br><span>{{ heating.type }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_10.png">迷雾</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <el-progress  class="controlDetail_bar controlDetail_facility" :color="`#EFF2FF`"
                                                                  :class="[denseFog.value !== '未运行' ? 'controlDetail_denseFog' : 'controlDetail_facility_right']"
                                                                  type="circle" :percentage="`30`" color="blue" width="120" :show-text="false"></el-progress>
                                                   <!-- <div class="control_bar controlDetail_bar controlDetail_facility"  :class="[denseFog.value !== '未运行' ? '' : 'controlDetail_facility_right']"
                                                         style="border-top-color:#EFF2FF;border-bottom-color:#EFF2FF;border-left-color:#EFF2FF;border-right-color:#FB4C2F;"></div>-->
                                                    <div class="bar_center_text barDetail_center_text facility_center_text">
                                                        <div>{{ denseFog.value }}</div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">迷雾阶段<br><span>{{ denseFog.type }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="controlDetail_box">
                                            <div class="control_current_title controlDetail_current_title"><img src="../img/control_title_11.png">循环风扇</div>
                                            <div class="clearfix controlDetail_bar_Allbox">
                                                <div class="control_bar_box controlDetail_bar_box">
                                                    <el-progress  class="controlDetail_bar controlDetail_facility" :color="`#EFF2FF`"
                                                                  :class="[circulatingFan.value !== '未运行' ? 'controlDetail_circulatingFan' : 'controlDetail_facility_right']"
                                                                  type="circle" :percentage="`30`" color="blue" width="120" :show-text="false"></el-progress>
<!--                                                    <div class="control_bar controlDetail_bar controlDetail_facility"-->
<!--                                                         :class="[circulatingFan.value !== '未运行' ? '' : 'controlDetail_facility_right']"-->
<!--                                                         style="border-top-color:#EFF2FF;border-bottom-color:#EFF2FF;border-left-color:#EFF2FF;border-right-color:#20A23F;"></div>-->
                                                    <div class="bar_center_text barDetail_center_text facility_center_text">
                                                        <div>{{ circulatingFan.value }}</div>
                                                    </div>
                                                </div>
                                                <div class="controlDetail_text_box clearfix">
                                                    <div class="bar_weather_text bar_text_left barDetail_text_left">状态<br><span>{{ circulatingFan.type }}</span></div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </template>
                                <svg width="100%" height="100%">
                                    <defs>
                                        <!--循环风扇-->
                                        <linearGradient id="circulatingFan" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="25%" style="stop-color:#EFF2FF" stop-opacity="0"></stop>
                                            <stop offset="100%" style="stop-color:#20A23F" stop-opacity="1"></stop>
                                        </linearGradient>
                                    </defs>
                                </svg>
                                <svg width="100%" height="100%">
                                    <defs>
                                        <!--迷雾-->
                                        <linearGradient id="denseFog" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="25%" style="stop-color:#EFF2FF" stop-opacity="0"></stop>
                                            <stop offset="100%" style="stop-color:#20A23F" stop-opacity="1"></stop>
                                        </linearGradient>
                                    </defs>
                                </svg>
                                <svg width="100%" height="100%">
                                    <defs>
                                        <!--加热-->
                                        <linearGradient id="heating" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="25%" style="stop-color:#EFF2FF" stop-opacity="0"></stop>
                                            <stop offset="100%" style="stop-color:#FB4C2F" stop-opacity="1"></stop>
                                        </linearGradient>
                                    </defs>
                                </svg>
                                <svg width="100%" height="100%">
                                    <defs>
                                        <!--降温-->
                                        <linearGradient id="cooling" x1="0%" y1="0%" x2="100%" y2="0%">
                                            <stop offset="25%" style="stop-color:#EFF2FF" stop-opacity="0"></stop>
                                            <stop offset="100%" style="stop-color:#496ECC" stop-opacity="1"></stop>
                                        </linearGradient>
                                    </defs>
                                </svg>
                            </div>


                        </div>
                    </div>
                </div>
            </div>

        </div>
    </body>

</html>
<script>
    var headvue=new Vue({
        el: '#app',
        data(){
            return {
                langinfo:{
                    name:"简体中文",
                    img:'../img/cn.png'
                },
                showlang:false,
                shownotice:false,
                isCollapse:false,
                langlist:[
                    {
                        img:'../img/cn.png',
                        name:'简体中文'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },
                    {
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },{
                        img:'../img/yy.png',
                        name:'English'
                    },

                ],


            }
        },
        computed: {

        },
        created() {

        },
        mounted(){



        },
        methods:{

            showlangdialog(){
                this.showlang=!this.showlang;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },
            chosethis(item){
                this.langinfo=item
                this.showlang=false;
            },
            shownoticedialog(){
                this.shownotice=!this.shownotice;
                this.showlang=false;
                this.showuserinfoaction=false


            },
              changemenu(){
                this.isCollapse=!this.isCollapse
                if(this.isCollapse){
                    $(".el-submenu__title span").hide();
                    $(".el-menu-item span").hide();
                    $(".el-submenu__title i").eq(1).hide();
                    $(".imc_left").css({"width":"auto","min-width":"auto"})
                    $(".indexmenu").css("height","100%")

                }
                else{
                    $(".imc_left").css({"width":"2.6rem","min-width":"200px"})
                    $(".indexmenu").css("height","calc(100% - 0.96rem)")
                }
            },
        },
        watch:{
            isCollapse(){
                meun.isCollapse=this.isCollapse
            }
        }
    })
    var meun=new Vue({
        el: '#meun',
        data(){
            return {
                showuserinfoaction:false,
                isCollapse:false,
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){

        },
        methods:{

            hidediaolog(){
                this.showlang=false;
                this.shownotice=false;
                this.showuserinfoaction=false
            },
            showuserinfoactiondialog(){
                this.showuserinfoaction=!this.showuserinfoaction;
                this.shownotice=false;
                this.showlang=false;
            },


            handleOpen(key, keyPath) {
                console.log(key, keyPath);
            },
            handleClose(key, keyPath) {
                console.log(key, keyPath);
            },


            hidefarmlist(){
                this.$refs["menu"].close("1")
            },

        }
    })
    var content=new Vue({
        el: '#content',
        data(){
            return {
                timeInterval: '',
                temperature: {},
                humidity: {},
                windowList: [],
                curtainList: [],
                cooling: {},
                heating: {},
                denseFog:{},
                circulatingFan: {}
            }
        },
        computed: {

        },
        created() {

        },
        mounted(){
            this.init()
            this.$nextTick(() => {
                // this.barChange()
            });
        },
        methods:{
            init() {
                // this.getWeizhi()
                // this.getWeatherData()
                // this.getRegion()
                this.getTimeInterval()
                this.getTemperature()
                this.getHumidity()
                this.getWindowsList()
                this.getCurtainList()
                this.getCooling()
                this.getHeating()
                this.getDenseFog()
                this.getCirculatingFan()
            },
            getWeizhi(index,row) {
                let oDot = document.getElementById('dot' + index);
                let deg = row;
                let timer = null;
                let radius = oDot.offsetLeft; // 旋转半径

                let radian = (2*Math.PI/360)*deg;
                let theTop = Math.ceil(Math.sin(radian)*radius);
                let theLeft = Math.ceil(Math.cos(radian)*radius);
                oDot.style.top = theTop + 'px';
                oDot.style.left = theLeft + 'px';
                deg += 0.5;
                if (deg === 361) {
                    deg = 0;
                }
                // timer = setInterval(function() {
                //     // console.log('Math.PI',oDot.offsetLeft)
                //
                // },1);
            },
            getTimeInterval(){
                let res = {data:'时段一'}
                this.timeInterval = res.data
            },
            barChange(obj, name) {
                let section = '';
                let proportion = '';
                let degrees = '';
                let allDegrees = ''
                if(obj.value < obj.leftValue) {
                    obj.blueShow = true;
                    section = obj.leftValue - obj.min;
                    proportion = (obj.value - obj.min) / section;
                    degrees = Math.ceil(proportion * 90);
                    allDegrees = degrees + 135
                }
                if(obj.value > obj.rightValue) {
                    obj.redShow = true;
                    section = obj.max - obj.rightValue;
                    proportion = (obj.value - obj.rightValue) / section;
                    degrees = Math.ceil(proportion * 90);
                    allDegrees = degrees + 90 + 90 + 135
                }
                if(obj.value > obj.leftValue && obj.value < obj.rightValue) {
                    obj.grayShow = true;
                    section = obj.rightValue - obj.leftValue;
                    proportion = (obj.value - obj.leftValue) / section;
                    degrees = Math.ceil(proportion * 90)
                    allDegrees = degrees + 90 + 135
                }
                this.getWeizhi(name,allDegrees)
            },
            getTemperature() {
                let res = {data:{
                        min: 0,
                        max : 40,
                        leftValue: 5,
                        rightValue: 33,
                        value: 28,
                        type: '模式2最大降温',
                        calculation: 25
                    }}

                this.temperature = res.data
                this.temperature.blueShow = false;
                this.temperature.redShow = false;
                this.temperature.grayShow = false;
                this.barChange(this.temperature,'temperature')
            },
            getHumidity() {
                let res = {data:{
                        min: 0,
                        max : 40,
                        leftValue: 5,
                        rightValue: 33,
                        value: 28,
                        measuredValue: 50.2,
                        missingValue: 5.2
                    }}

                this.humidity = res.data
                this.humidity.blueShow = false;
                this.humidity.redShow = false;
                this.humidity.grayShow = false;
                this.barChange(this.humidity,'humidity')
            },
            getWindowsList() {
                let res = {data:[{
                        name: '迎风创',
                        value: 50,
                        type: '最小位'
                    },{
                        name: '被风窗',
                        value: 50,
                        type: '最小位'
                    },{
                        name: '不定向',
                        value: 50,
                        type: '最小位'
                    }]}
                this.windowList = res.data
            },
            getCurtainList() {
                let res = {data:[{
                        name: '帘幕1',
                        value: 50,
                        type: '遮阳等级'
                    },{
                        name: '帘幕2',
                        value: 50,
                        type: '遮阳等级'
                    },{
                        name: '帘幕3',
                        value: 50,
                        type: '遮阳等级'
                    },{
                        name: '帘幕4',
                        value: 50,
                        type: '遮阳等级'
                    }]}
                this.curtainList = res.data
            },
            getCooling() {
                let res = {data:{
                        value: '降温设备1',
                        type: '无降温',
                        start: '运行中'
                    }}
                this.cooling = res.data
            },
            getHeating() {
                let res = {data:{
                        value: '45%',
                        type: '无需要',
                        start: '运行中'
                    }}
                this.heating = res.data
            },
            getDenseFog() {
                let res = {data:{
                        value: '未运行',
                        type: '迷雾阶段',
                        start: '未运行'
                    }}
                this.denseFog = res.data
            },
            getCirculatingFan() {
                let res = {data:{
                        value: '45%',
                        type: '无需求',
                        start: '运行中'
                    }}
                this.circulatingFan = res.data
            }
        }
    })
</script>
<script type="text/javascript">

    timer = setInterval(function() {

    },1);
</script>
<script src="../js/index.js"></script>
<style lang="scss" scode>
    .controlDetail_facility /deep/ svg>path:nth-child(1) {
        stroke: #EFF2FF;
    }
    .controlDetail_circulatingFan /deep/ svg>path:nth-child(2) {
        stroke: url(#circulatingFan);
    }
    .controlDetail_denseFog /deep/ svg>path:nth-child(2) {
        stroke: url(#denseFog);
    }
    .controlDetail_heating /deep/ svg>path:nth-child(2) {
        stroke: url(#heating);
    }
    .controlDetail_cooling /deep/ svg>path:nth-child(2) {
        stroke: url(#cooling);
    }
    .controlDetail_facility_right /deep/ svg>path:nth-child(2) {
        stroke: #EFF2FF;
    }
</style>
